.btn-sub {
  color: lightslategrey;
  border-color: lightslategrey;
  overflow: hidden;
  position: relative;
  width: max-content;
}
.btn-sub:before, .btn-sub:after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 0;
  top: 0;
  -webkit-transition: all .4s;
  transition: all .4s;
}
.btn-sub:before {
  left: -30px;
  -webkit-transform: skew(-45deg, 0);
          transform: skew(-45deg, 0);
}
.btn-sub:after {
  right: -30px;
  -webkit-transform: skew(-45deg, 0);
          transform: skew(-45deg, 0);
}
.btn-sub:hover {
    color:black;
    border-color:black;
}
.btn-sub:hover:before, .btn-sub:hover:after {
  width: 100%;
}